<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<!-- 计算属性:
    1.定义:要用的属性不存在,要通过已有属性计算得来。
    2.原理:底层借助了objcet.defineproperty方法提供的getter和lset
    3.get函数什么时候执行?
        (1).初次读取时会执行一次。
        (2).当依赖的数据发生改变时会被再次调用。
    4.优势:与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
5.备注:
1.计算属性最终会出现在vm上，直接读取使用即可。
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
 -->
<body>
    <div class="box">
        <input type="text" v-model="xing"><br><br>
        <input type="text" v-model="ming"><br><br>
        <!-- slice 截取方法,只要第0,1,2个,后面的都不要 -->
        <span>{{fullname}}</span>
    </div>
</body>
<script>
    var vm = new Vue({
        data() {
            return {
                xing:'张',
                ming:'三',
                
            }
        },
        computed:{
            //需要写成对象的形式
            fullname:{
                //当fullname被读取的时候,get函数会被调用,get的返回值会被作为fullname的值
                //get调用时机:1.初次读取fullname时,不然就走缓存,不用多次调用
                //              2.所依赖的数据发生改变时
                get(){
                    return this.xing+'-'+ming
                },
                // fullname被修改的时候调用
                //传入的参数就是fullname修改后的值
                //如果这个计算属性只考虑读取,不会被修改,那么set就可以省略不写
                set(value){
                    //spilt按照特定字符将字符串拆成数组
                    var arr = value.spilt('-')
                    this.xing = arr[0]
                    this.ming = arr[1]
                }

            }
        },
        
    })
    vm.$mount('.box')
</script>
</html>